<template>
  <div class="wrap">
    <div class="header"></div>
    <div class="main">
      <div class="summarize">
        <div class="image-title"></div>
      </div>
      <div class="summarize-image"></div>
      <div class="graph">
        <div class="prize-graph"></div>
      </div>
      <div class="prize-images"></div>
      <div class="winner-list">
        <div class="images"></div>
      </div>
      <div class="one-prize">
        <div class="title">一等奖：小米11Pro</div>
        <div class="headers">
          <div class="left">恭喜：</div>
          <div class="images">
            <img src="../../assets/images/annom/avatar.png" class="img" />
          </div>
          <div class="phone">136******76</div>
          <div class="right">获奖</div>
        </div>
        <div class="voice" @click="butVideo"></div>
        <div class="foot-text" @click="butVideo">查看用户获奖感言</div>
      </div>
      <van-overlay :show="show" :lock-scroll="true">
        <div class="wrapper">
          <div class="block">
            <div class="clone">
              <van-icon name="close" class="icons" @click="btnClone" />
            </div>
            <video
              id="homeVideo"
              class="home-video"
              preoad
              controls
              preload="auto"
              webkit-playsinline="true"
              playsinline="true"
            >
              <!-- muted poster="res/video/cover.jpg"  -->
              <source :src="videoSrc" type="video/mp4" />
            </video>
          </div>
        </div>
      </van-overlay>

      <div class="two-prize">
        <div class="title">二等奖：500元购物卡</div>
        <div class="center">
          <vue-seamless-scroll
            :data="twoPrize"
            :class-option="defaultOption"
            class="Box"
          >
            <ul class="ul-scoll">
              <li v-for="(item, index) in twoPrize" :key="index">
                <span>恭喜</span>
                <span>
                  {{ item.phone.replace(/(\d{3})\d*(\d{2})/, "$1******$2") }}
                </span>
                <span> {{ item.date }} </span>
              </li>
            </ul>
          </vue-seamless-scroll>
        </div>
      </div>
      <div class="three-prize">
        <div class="title">三等奖（一）：摩飞料理机</div>
        <div class="center">
          <vue-seamless-scroll
            :data="thrid_1"
            :class-option="defaultOption"
            class="Box"
          >
            <ul class="ul-scoll">
              <li v-for="(item, index) in thrid_1" :key="index">
                <span>恭喜</span>
                <span>
                  {{ item.phone.replace(/(\d{3})\d*(\d{2})/, "$1******$2") }}
                </span>
                <span> {{ item.date }} </span>
              </li>
            </ul>
          </vue-seamless-scroll>
        </div>
      </div>
      <div class="four-prize">
        <div class="title">三等奖（二）：美菱空气炸锅</div>
        <div class="center">
          <vue-seamless-scroll
            :data="thrid_2"
            :class-option="defaultOption"
            class="Box"
          >
            <ul class="ul-scoll">
              <li v-for="(item, index) in thrid_2" :key="index">
                <span>恭喜</span>
                <span>
                  {{ item.phone.replace(/(\d{3})\d*(\d{2})/, "$1******$2") }}
                </span>
                <span> {{ item.date }} </span>
              </li>
            </ul>
          </vue-seamless-scroll>
        </div>
      </div>
      <div class="five-prize">
        <div class="title">四等奖（一）：艾谷 稻米油 5L</div>
        <div class="center">
          <vue-seamless-scroll
            :data="fourth_1"
            :class-option="defaultOption"
            class="Box"
          >
            <ul class="ul-scoll">
              <li v-for="(item, index) in fourth_1" :key="index">
                <span>恭喜</span>
                <span>
                  {{ item.phone.replace(/(\d{3})\d*(\d{2})/, "$1******$2") }}
                </span>
                <span> {{ item.date }} </span>
              </li>
            </ul>
          </vue-seamless-scroll>
        </div>
      </div>
      <div class="six-prize">
        <div class="title">四等奖（二）：苏软香大米5kg</div>
        <div class="center">
          <vue-seamless-scroll
            :data="fourth_2"
            :class-option="defaultOption"
            class="Box"
          >
            <ul class="ul-scoll">
              <li v-for="(item, index) in fourth_2" :key="index">
                <span>恭喜</span>
                <span>
                  {{ item.phone.replace(/(\d{3})\d*(\d{2})/, "$1******$2") }}
                </span>
                <span> {{ item.date }} </span>
              </li>
            </ul>
          </vue-seamless-scroll>
        </div>
      </div>
    </div>
    <div class="footer"></div>
    <!-- 微信遮罩 -->
    <div @touchmove.prevent class="rigth" v-if="showWx">
      <img src="../../assets/img/wei_20210307160153.png" />
    </div>
    <div class="banner" v-show="closeUp">
      <img
        src="../../assets/img/share/x.png"
        class="imgone"
        @click="btnCloseUp"
      />
      <img src="../../assets/img/share/yuan.png" class="imgtwo" />
      <span class="spanone">
        打开媛福达APP
        <span class="spantwo">购物方便优惠多</span>
      </span>
      <div class="btn" @click="Gone">下载</div>
      <div id="upBut" class="upDown">打开</div>
      <!-- <div class="upDown" @click="downUp" v-if="!showIos">打开</div> -->
    </div>
  </div>
</template>
<script>
import vueSeamlessScroll from "vue-seamless-scroll";
import { getSystem } from "../../js/js";
import "video.js/dist/video-js.css";
export default {
  data() {
    return {
      closeUp: true,
      system: getSystem(),
      showWx: false,
      // 弹窗
      show: false,
      twoPrize: [
        { phone: "15633702021", date: "2021-09-07" },
        { phone: "13166540961", date: "2021-09-07" },
        { phone: "18246376269", date: "2021-09-07" },
        { phone: "13994128639", date: "2021-09-07" },
        { phone: "15835695677", date: "2021-09-07" },
        { phone: "15188692167", date: "2021-09-15" },
        { phone: "15720162753", date: "2021-09-16" },
        { phone: "17331293522", date: "2021-09-17" },
        { phone: "15935346962", date: "2021-09-19" },
        { phone: "17325457638", date: "2021-09-20" },
      ],
      thrid_1: [
        { phone: "13465730429", date: "2021-09-15" },
        { phone: "13864564512", date: "2021-09-15" },
        { phone: "13359505868", date: "2021-09-15" },
        { phone: "15582738990", date: "2021-09-15" },
        { phone: "15630227027", date: "2021-09-16" },
        { phone: "19903125234", date: "2021-09-17" },
        { phone: "15832486719", date: "2021-09-17" },
        { phone: "13593504375", date: "2021-09-18" },
        { phone: "15237222435", date: "2021-09-18" },
        { phone: "13546431078", date: "2021-09-18" },
        { phone: "15230073465", date: "2021-09-18" },
        { phone: "13400166141", date: "2021-09-18" },
        { phone: "18732504570", date: "2021-09-19" },
        { phone: "13833044391", date: "2021-09-20" },
        { phone: "15833999149", date: "2021-09-20" },
        { phone: "13689236066", date: "2021-09-20" },
        { phone: "15175287300", date: "2021-09-21" },
        { phone: "18868666233", date: "2021-09-21" },
        { phone: "13835743445", date: "2021-09-21" },
        { phone: "15066762180", date: "2021-09-22" },
        { phone: "18833523511", date: "2021-09-22" },
      ],
      thrid_2: [
        { phone: "17739673086", date: "2021-09-07" },
        { phone: "15803568319", date: "2021-09-07" },
        { phone: "13223452428", date: "2021-09-07" },
        { phone: "13470016705", date: "2021-09-08" },
        { phone: "15203474893", date: "2021-09-08" },
        { phone: "15132844848", date: "2021-09-08" },
        { phone: "19834587200", date: "2021-09-08" },
        { phone: "18706611235", date: "2021-09-08" },
        { phone: "15511625761", date: "2021-09-08" },
        { phone: "18234749623", date: "2021-09-08" },
        { phone: "13467134867", date: "2021-09-09" },
        { phone: "15100252008", date: "2021-09-09" },
        { phone: "13467118441", date: "2021-09-09" },
        { phone: "13220970017", date: "2021-09-09" },
        { phone: "13233123192", date: "2021-09-10" },
        { phone: "15064768688", date: "2021-09-11" },
        { phone: "15135774531", date: "2021-09-12" },
        { phone: "13383628215", date: "2021-09-12" },
        { phone: "13935779646", date: "2021-09-12" },
        { phone: "15030237593", date: "2021-09-13" },
        { phone: "15835743097", date: "2021-09-13" },
        { phone: "15553359155", date: "2021-09-13" },
        { phone: "15903477834", date: "2021-09-13" },
        { phone: "15530711197", date: "2021-09-13" },
        { phone: "15230237206", date: "2021-09-13" },
      ],
      fourth_1: [
        { phone: "13932975785", date: "2021-09-14" },
        { phone: "15613255302", date: "2021-09-15" },
        { phone: "15122812548", date: "2021-09-15" },
        { phone: "18403416683", date: "2021-09-16" },
        { phone: "13796776798", date: "2021-09-16" },
        { phone: "18231803995", date: "2021-09-16" },
        { phone: "13930255098", date: "2021-09-16" },
        { phone: "15822963589", date: "2021-09-16" },
        { phone: "17581757555", date: "2021-09-17" },
        { phone: "13280068655", date: "2021-09-18" },
        { phone: "15149555970", date: "2021-09-18" },
        { phone: "15933581511", date: "2021-09-18" },
        { phone: "18567417958", date: "2021-09-18" },
        { phone: "15225058788", date: "2021-09-18" },
        { phone: "15831252270", date: "2021-09-19" },
        { phone: "13331217013", date: "2021-09-20" },
        { phone: "15200095916", date: "2021-09-20" },
        { phone: "13935774469", date: "2021-09-20" },
        { phone: "17605249118", date: "2021-09-20" },
        { phone: "15227739580", date: "2021-09-20" },
        { phone: "19133331815", date: "2021-09-20" },
        { phone: "17305681106", date: "2021-09-20" },
        { phone: "18358463110", date: "2021-09-21" },
        { phone: "18835703656", date: "2021-09-21" },
        { phone: "18734751702", date: "2021-09-21" },
        { phone: "15822076518", date: "2021-09-21" },
        { phone: "15373031745", date: "2021-09-22" },
      ],
      fourth_2: [
        { phone: "13307961853", date: "2021-09-07" },
        { phone: "15075167938", date: "2021-09-07" },
        { phone: "15229919116", date: "2021-09-07" },
        { phone: "18632389327", date: "2021-09-08" },
        { phone: "18763695776", date: "2021-09-08" },
        { phone: "13663120476", date: "2021-09-08" },
        { phone: "15522874442", date: "2021-09-09" },
        { phone: "13400115150", date: "2021-09-09" },
        { phone: "17334377559", date: "2021-09-09" },
        { phone: "13102995832", date: "2021-09-09" },
        { phone: "15835761840", date: "2021-09-09" },
        { phone: "15830941291", date: "2021-09-09" },
        { phone: "18831801142", date: "2021-09-09" },
        { phone: "15176478119", date: "2021-09-10" },
        { phone: "13994791537", date: "2021-09-10" },
        { phone: "15934500399", date: "2021-09-10" },
        { phone: "15930189776", date: "2021-09-10" },
        { phone: "15931376687", date: "2021-09-10" },
        { phone: "15822963589", date: "2021-09-10" },
        { phone: "15903317502", date: "2021-09-10" },
        { phone: "15612289003", date: "2021-09-10" },
        { phone: "17333981636", date: "2021-09-11" },
        { phone: "18222106194", date: "2021-09-11" },
        { phone: "13931277895", date: "2021-09-11" },
        { phone: "18992441138", date: "2021-09-12" },
        { phone: "15631269709", date: "2021-09-12" },
        { phone: "13734056981", date: "2021-09-13" },
        { phone: "18234792779", date: "2021-09-13" },
        { phone: "13503323684", date: "2021-09-13" },
        { phone: "13734138310", date: "2021-09-13" },
        { phone: "15035399281", date: "2021-09-13" },
        { phone: "13400166141", date: "2021-09-13" },
        { phone: "18617514969", date: "2021-09-14" },
        { phone: "13473116531", date: "2021-09-14" },
        { phone: "15830885911", date: "2021-09-14" },
      ],
      videoSrc:
        "https://yuanfuda933.oss-cn-zhangjiakou.aliyuncs.com/annivery_prize20210927.MP4",
    };
  },
  components: {
    vueSeamlessScroll,
  },
  mounted() {
    this.toph();
  },
  computed: {
    defaultOption() {
      return {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: 1, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: false, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
  created() {
    this.system = getSystem();
    // 调用获取次数接口 获取剩余 分享次数 和 游戏次数
    if (!this.system.yfd && !this.system.wechat) {
      if (this.system.iOS9 || this.system.android) {
        ULink([
          {
            id: "usr1anivh5aa8uq6", // 后台生成的裂变活动LinkID
            data: {
              path: "webview",
              webUrl:
                "https://download.yuanfuda933.com/h5/other2.html#/announcement",
              // webUrl: "http://h.yuanfudagroup.com/h5/#/information", // 活动地址
              andUrl:
                "https://download.yuanfuda933.com/h5/other2.html#/announcement", // 活动地址
              // extraData: `{id:${this.id},uid:${this.uid}`,
              // extraData: {
              //   id: this.id,
              //   uid: this.uid,
              //   tid: this.tid
              // }
            } /* 自定义参数，选填 */,
            selector: "#upBut",
            useOpenInBrowerTips: "default",
            proxyOpenDownload: function (defaultAction, LinkInstance) {
              window.location.href = LinkInstance.solution.downloadUrl;
            },
          },
        ]);
      }
    } else {
      this.getToken((token) => {
        this.$store.commit("setUser", token);
      });
    }
  },
  methods: {
    // 跳转方法
    href(uri, blank = true) {
      const a = document.createElement("a");
      a.style.display = "none";
      a.href = uri;
      if (blank) a.setAttribute("target", "_blank");
      document.body.appendChild(a);
      a.click();
      setTimeout((t) => {
        document.body.removeChild(a);
      }, 0);
    },
    toph() {
      if (this.system.wechat) {
        this.showWx = true;
        return false;
      } else {
        this.showWx = false;
      }
    },
    btnCloseUp() {
      this.closeUp = false;
    },
    Gone() {
      if (this.system.iOS) {
        this.href("https://itunes.apple.com/cn/app/id1542709823?mt=8");
      } else if (this.system.android) {
        window.location.href =
          "https://yuanfuda933.oss-cn-zhangjiakou.aliyuncs.com/yfdMall_1_v1.0.1.apk";
      }
    },
    downUp() {
      if (this.system.iOS) {
        this.href("https://itunes.apple.com/cn/app/id1542709823?mt=8");
        return;
      }
    },
    // 暂停回调
    onPlayerPause(player) {
      console.log("player pause!", player);
    },
    // 视频播完回调
    onPlayerEnded($event) {
      console.log(player);
    },
    // 弹窗
    // buttonVoice() {
    //   this.show = false;
    // },
    butVideo() {
      this.show = true;
      this.closeUp = false;
    },
    btnClone() {
      const myVideo = document.getElementById("homeVideo");
      myVideo.pause();
      // 属性设置或返回音频/视频播放的当前位置（以秒计）。当设置该属性时，播放会跳跃到指定的位置。
      // myVideo.currentTime = 0;
      this.show = false;
      this.closeUp = true;
    },
  },
};
</script>
<style scoped lang="less">
.dialog-box {
  width: 1.89rem;
  height: 1.95rem;
  position: fixed;
  top: 12.76rem;
  left: 7.95rem;
  z-index: 22;
  .images {
    width: 1.89rem;
    height: 1.95rem;
  }
}
.rigth {
  position: fixed;
  top: 0;
  z-index: 9999;
  width: 10rem;
  height: 30rem;
  background-color: #1e1e1e;
  opacity: 0.8;
}
.rigth img {
  width: 8rem;
  height: 4.4rem;
  float: right;
}
.banner {
  position: fixed;
  top: 0%;
  width: 10rem;
  height: 2.28rem;
  background: #000000;
  display: flex;
  z-index: 11;
  .imgone {
    display: block;
    margin: auto 0.293333rem;
    width: 0.586667rem;
    height: 0.586667rem;
  }
  .imgtwo {
    display: block;
    margin: auto 0.266667rem;
    width: 1.28rem;
    height: 1.28rem;
  }
  .spanone {
    margin: auto 0.266667rem;
    width: 3rem;
    height: 1.453333rem;
    font-size: 0.426667rem;
    color: #ffffff;
    .spantwo {
      font-size: 0.32rem;
      font-size: #9b9b9b;
      color: #9b9b9b;
    }
  }
  .btn {
    width: 1.55rem;
    height: 0.906667rem;
    background: #ea0462;
    border-radius: 0.133333rem;
    font-size: 0.426667rem;
    color: #ffffff;
    text-align: center;
    line-height: 0.906667rem;
    margin: auto 0;
  }
  .upDown {
    width: 1.55rem;
    height: 0.906667rem;
    background: #ea0462;
    border-radius: 0.133333rem;
    font-size: 0.426667rem;
    color: #ffffff;
    text-align: center;
    line-height: 0.906667rem;
    margin: auto 0;
    margin-left: 0.2rem;
  }
}
.wrap {
  overflow: hidden;
  width: 100%;
  font-family: Arial, Helvetica;
  background: url("../../assets/images/annom/mian-img.png") no-repeat;
  background-size: 100% 100%;
  .header {
    width: 100%;
    height: 13.39rem;
    background: url("../../assets/images/annom/banner.png") no-repeat;
    background-size: 100% 100%;
  }
  .main {
    width: 100%;
    .summarize {
      width: 100%;
      padding-top: 0.2rem;
      .image-title {
        width: 9.15rem;
        height: 1.1rem;
        margin: 0 auto;
        background: url("../../assets/images/annom/summarize.png") no-repeat;
        background-size: 100% 100%;
      }
    }
    .summarize-image {
      width: 9.15rem;
      height: 7.78rem;
      margin: 0 auto;
      background: url("../../assets/images/annom/summarize-text.png") no-repeat;
      background-size: 100% 100%;
      padding-top: 0.1rem;
    }
    .graph {
      width: 100%;
      padding-top: 0.2rem;
      .prize-graph {
        width: 9.15rem;
        height: 1.1rem;
        margin: 0 auto;
        background: url("../../assets/images/annom/prize.png") no-repeat;
        background-size: 100% 100%;
      }
    }
    .prize-images {
      width: 9.15rem;
      height: 7.54rem;
      margin: 0 auto;
      background: url("../../assets/images/annom/prize-img.png") no-repeat;
      background-size: 100% 100%;
      margin-top: 0.22rem;
    }
    .winner-list {
      width: 100%;
      padding-top: 0.3rem;
      .images {
        width: 9.15rem;
        height: 1.1rem;
        margin: 0 auto;
        background: url("../../assets/images/annom/nameList.png") no-repeat;
        background-size: 100% 100%;
      }
    }
    .one-prize {
      width: 9.25rem;
      height: 6.03rem;
      margin: 0.23rem auto;
      background: url("../../assets/images/annom/one-prize.png") no-repeat;
      background-size: 100% 100%;
      .title {
        width: 100%;
        text-align: center;
        font-size: 0.39rem;
        padding-top: 0.1rem;
        font-weight: bold;
        color: #ffffff;
      }
      .headers {
        width: 7.76rem;
        height: 0.76rem;
        background: #df31a2;
        border-radius: 0.39rem;
        background-color: rgba(0, 0, 0, 0.1);
        margin: 0 auto;
        margin-top: 0.56rem;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        font-size: 0.29rem;
        text-align: center;
        .left {
          width: 1.2rem;
          color: #f11ab1;
        }
        .images {
          width: 0.8rem;
          height: 0.66rem;
          .img {
            width: 0.66rem;
            height: 0.66rem;
          }
        }
        .phone {
          width: 1.9rem;
          color: #f11ab1;
        }
        .right {
          width: 1rem;
          color: #f47101;
        }
      }
      .voice {
        width: 6.49rem;
        height: 2.73rem;
        margin: 0 auto;
        background: chartreuse;
        border-radius: 0.3rem;
        margin-top: 0.3rem;
        background: url("../../assets/images/annom/wpshos.png") no-repeat;
        background-size: 100% 100%;
      }
      .foot-text {
        width: 3.1rem;
        height: 0.58rem;
        background: #ffffff;
        border-radius: 0.3rem;
        margin: 0 auto;
        text-align: center;
        color: #fe0000;
        font-size: 0.29rem;
        margin-top: 0.22rem;
        line-height: 0.58rem;
        font-weight: bold;
      }
    }
    .two-prize,
    .three-prize,
    .four-prize,
    .five-prize,
    .six-prize {
      width: 9.25rem;
      height: 5.8rem;
      margin: 0.49rem auto;
      .title {
        width: 100%;
        text-align: center;
        font-size: 0.39rem;
        padding-top: 0.16rem;
        font-weight: bold;
        color: #ffffff;
      }
      .center {
        width: 90%;
        height: 3.5rem;
        margin: 0 auto;
        padding-top: 0.78rem;
        .Box {
          width: 100%;
          height: 3.5rem;
          overflow: hidden;
          .ul-scoll {
            li {
              font-size: 0.3rem;
              color: #000000;
              padding-top: 0.2rem;
              display: flex;
              flex-direction: row;
              justify-content: center;
              align-items: center;
              span {
                width: 33.33rem;
                text-align: center;
              }
            }
          }
        }
      }
    }
    .two-prize {
      background: url("../../assets/images/annom/ziseb.png") no-repeat;
      background-size: 100% 100%;
    }
    .three-prize,
    .four-prize {
      background: url("../../assets/images/annom/yellow.png") no-repeat;
      background-size: 100% 100%;
    }
    .five-prize,
    .six-prize {
      background: url("../../assets/images/annom/blue.png") no-repeat;
      background-size: 100% 100%;
    }
  }
  .footer {
    width: 100%;
    height: 1.2rem;
  }
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  .block {
    width: 100%;
    height: 100%;
    position: relative;
    .clone {
      z-index: 95;
      position: absolute;
      right: 0.4rem;
      top: 1rem;
      .icons {
        font-size: 0.8rem;
        color: #ccc;
      }
    }
    .home-video {
      z-index: 90;
      width: 100%;
      height: 100%;
      object-fit: fill;
      position: absolute;
      top: 0;
      left: 0;
    }
  }
}
</style>